<template>
	<!-- <el-header>
		<el-menu background-color="#00c292" text-color="#FFFFFF" active-text-color="#FFFFFF" mode="horizontal">
			<div class="fl title">{{this.$project.projectName}}</div>
			<div class="fr logout" style="display:flex;">
				<el-menu-item index="3">
					<div>{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
				</el-menu-item>
				<el-menu-item @click="onLogout" index="2">
					<div>退出登录</div>
				</el-menu-item>
			</div>
		</el-menu>
	</el-header> -->
	<div class="navbar"
		:style="{ background: heads.headBgColor, height: heads.headHeight, boxShadow: heads.headBoxShadow, lineHeight: heads.headHeight }">
		<div class="title-menu" :style="{ justifyContent: heads.headTitleStyle == '1' ? 'flex-start' : 'center' }">
			<el-image v-if="heads.headTitleImg" class="title-img"
				:style="{ width: heads.headTitleImgWidth, height: heads.headTitleImgHeight, boxShadow: heads.headTitleImgBoxShadow, borderRadius: heads.headTitleImgBorderRadius }"
				:src="heads.headTitleImgUrl" fit="cover"></el-image>
			<div class="title-name" :style="{ color: heads.headFontColor, fontSize: heads.headFontSize }">
				{{ this.$project.projectName }}</div>
		</div>
		<div class="right-menu">
			<div class="user-info"
				:style="{ color: heads.headUserInfoFontColor, fontSize: heads.headUserInfoFontSize }">
				<span>身份:{{ this.$storage.get('role') }} </span>
				<span>姓名:{{ this.$storage.get('adminName') }} </span>
			</div>
			<div class="logout" :style="{ color: heads.headLogoutFontColor, fontSize: heads.headLogoutFontSize }"
				@click="onLogout()">退出登录</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dialogVisible: false,
			ruleForm: {},
			user: {},
			heads: { "headLogoutFontHoverColor": "#fff", "headFontSize": "28px", "headUserInfoFontColor": "rgba(0, 0, 0, 1)", "headBoxShadow": "0 0px 0px #444", "headTitleImgHeight": "44px", "headLogoutFontHoverBgColor": "rgba(45, 103, 81, 0.1)", "headFontColor": "rgba(0, 0, 0, 1)", "headTitleImg": false, "headHeight": "60px", "headTitleImgBorderRadius": "22px", "headTitleImgUrl": "http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg", "headBgColor": "radial-gradient(circle, #F3FFFB 0%, #9BC8B7 100%)", "headTitleImgBoxShadow": "0 1px 6px #444", "headLogoutFontColor": "rgba(0, 0, 0, 1)", "headUserInfoFontSize": "14px", "headTitleImgWidth": "44px", "headTitleStyle": "2", "headLogoutFontSize": "14px" },
		};
	},
	created() {
		this.setHeaderStyle()
	},
	mounted() {
		let sessionTable = this.$storage.get("sessionTable")
		this.$http({
			url: sessionTable + '/session',
			method: "get"
		}).then(({
			data
		}) => {
			if (data && data.code === 0) {
				this.user = data.data;
				this.$storage.set('userid', data.data.id);
			} else {
				let message = this.$message
				message.error(data.msg);
			}
		});
	},
	methods: {
		async onLogout() {
			const confirmResult = await this.$confirm('此操作将退出, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).catch((err) => {
				return err
			})
			// 如果用户确认删除，则返回值为字符串 confirm
			// 如果用户取消删除，则返回值为字符串 cancel
			if (confirmResult !== 'confirm') return this.$message.info('已取消退出！')
			this.$message.success('退出成功！')

			let storage = this.$storage
			let router = this.$router
			storage.clear()
			router.replace({
				name: "login"
			});
		},

		onIndexTap() {
			window.location.href = `${this.$base.indexUrl}`
		},
		setHeaderStyle() {
			this.$nextTick(() => {
				document.querySelectorAll('.navbar .right-menu .logout').forEach(el => {
					el.addEventListener("mouseenter", e => {
						e.stopPropagation()
						el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor
						el.style.color = this.heads.headLogoutFontHoverColor
					})
					el.addEventListener("mouseleave", e => {
						e.stopPropagation()
						el.style.backgroundColor = "transparent"
						el.style.color = this.heads.headLogoutFontColor
					})
				})
			})
		},
	}
};
</script>


<style lang="scss" scoped>
.navbar {
	height: 60px;
	line-height: 60px;
	width: 100%;
	padding: 0 34px;
	box-sizing: border-box;
	background-color: #ff00ff;
	position: relative;
	z-index: 111;

	.right-menu {
		position: absolute;
		right: 34px;
		top: 0;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 111;

		.user-info {
			font-size: 16px;
			color: red;
			padding: 0 12px;
		}

		.logout {
			font-size: 16px;
			color: red;
			padding: 0 12px;
			cursor: pointer;
		}

	}

	.title-menu {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;

		.title-img {
			width: 44px;
			height: 44px;
			border-radius: 22px;
			box-shadow: 0 1px 6px #444;
			margin-right: 16px;
		}

		.title-name {
			font-size: 24px;
			color: #fff;
			font-weight: 700;
		}
	}
}

.user-info {

	span {
		margin-right: 10px
	}
}

// .el-header .fr {
// 	float: right;
// }

// .el-header .fl {
// 	float: left;
// }

// .el-header {
// 	width: 100%;
// 	color: #333;
// 	text-align: center;
// 	line-height: 60px;
// 	padding: 0;
// 	z-index: 99;
// }

// .logo {
// 	width: 60px;
// 	height: 60px;
// 	margin-left: 70px;
// }

// .avator {
// 	width: 40px;
// 	height: 40px;
// 	background: #ffffff;
// 	border-radius: 50%;
// }

// .title {
// 	color: #ffffff;
// 	font-size: 20px;
// 	font-weight: bold;
// 	margin-left: 20px;
// }
</style>
